const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack')

const isDev = process.env.NODE_ENV === 'development' // 检测是不是开发环境

const config = {
  // 编译目标平台
  target: 'web', 
  // 系统文件入口
  entry: path.join(__dirname, 'src/index.js'), 
  // 系统文件出口
  output: {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist')
  },
  // 配置解析
  module: {
     rules: [
       {
         // vue 文件解析
         test:/\.vue$/,
         loader:'vue-loader'
       },
       {
         test:/\.jsx$/,
         loader:'babel-loder'
       },
       {
         // 样式解析
          test: /\.css$/,
          use: [
            'style-loader',
             'css-loader',
             'sass-loader'
            ]
       },
       {
          // styl 文件处理
          test: /\.styl$/,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            'stylus-loader'
          ]
       },
       {
         // 图片解析
         test: /\.(gif|jpg|jpeg|png|svg)$/,
         use:[
            {
              loader: 'url-loader',
              options: {
                limit: 1024,
                name: '[name]-cooly.[ext]'
              }
            }
         ]
       }
     ]
  },
  // 配置插件
  plugins:[
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new VueLoaderPlugin(), // vueloader插件
    new HtmlPlugin() // html插件
  ]
}

// 开发环境配置
if(isDev){
  config.devtool = "#cheap-module-eval-source-map"
  config.devServer = {
    port: 8000,   // 服务监听端口
    host: '0.0.0.0', // 服务监听host
    overlay:{
      errors: true,  // 错误显示
    },
    open: true, // 自动打开浏览器
    hot: true, // 打开热加载
  }
  // 添加热加载和减少运行问题
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
}

module.exports = config